import { Button, Form, Select, Input, Row,Col } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import useGetCategories from '../../helpers/categories'
import { search_products } from '../../store/actions/search'
import ProductItem from './ProductItem'

function Search () {
    const dispatch = useDispatch()

    const {results} = useSelector(state => state.search)
    const [ form ] = Form.useForm()
    const handleOnFinish = (value) => {
        dispatch(search_products(value))
        form.resetFields()
    }
    const categories = useGetCategories()
    return (
        <>
            <Form form={form} layout="inline" initialValues={{"category":"all"}} onFinish={handleOnFinish}>
                <Input.Group compact>
                
                
                <Form.Item name="category">
                    <Select>
                        <Select.Option value="all">所有分类</Select.Option>
                        {
                            categories.map(item => (
                                <Select.Option value={item._id}>{item.name}</Select.Option>
                            ))
                        }
                    </Select>
                </Form.Item>
                <Form.Item name="search">
                    <Input />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">搜索</Button>
                </Form.Item>
                </Input.Group>
            </Form>
            <Row gutter={[16, 16]}>
                {
                    results.map(item => (
                        <Col span="6">
                        <ProductItem product={item} />
                        </Col>
                    ))
                }
            </Row>
        
        </>
    )
}
export default Search